<script setup>
import { defineProps, ref } from 'vue';
defineProps([
  'changeSetp',
  'step'
])

// assest列表
let assestList = ref([
  {
    name:'Confindentiality',
    criticality:''
  },
  {
    name:'Integrity',
    criticality:''
  },
  {
    name:'Availability',
    criticality:''
  },
  {
    name:'Privacy',
    criticality:''
  },
  {
    name:'Safety',
    criticality:''
  },
])

// criticality与颜色的映射
const criticalityMap = {
  'High': '#f45c5b',
  'Medium': '#f7b262',
  'Low': '#5bc88d',
  'None': 'gray',
  '': 'gray',
}

</script>

<template>
  <div class="container" >
    <!-- 上部文字 -->
    <div class="plaint-text" v-if="step < 2" >
      <span>Assess the criticality of this assess:</span>
    </div>
    <!-- 中间编辑区 -->
    <div class="selection-area" >
      <div class="assess-item" v-for="item in assestList" :key="item.name" >
          <div class="item-name" >
            {{ item.name }}
          </div>
          <div class="item-controler" >
            <div class="color-point" :style="{ background: criticalityMap[item.criticality] }" ></div>
            <!-- 编辑界面状态 -->
            <el-select 
              class="select" 
              v-model="item.criticality" 
              placeholder="Select"
              @change="(value) => item.criticality = value"
              v-if="step < 2"
            >
              <el-option value="High" label="High" />
              <el-option value="Medium" label="Medium" />
              <el-option value="Low" label="Low" />
              <el-option value="None" label="None" />
            </el-select>
            <!-- 结果状态 -->
            <div 
              v-else 
              class="result"
            >
              {{ item.criticality }}
            </div>
          </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="control-area" v-if="step < 2" >
      <el-button 
        class="submit"
        color="#252629" 
        :disabled="assestList.some((item) => item.criticality === '')"
        @click="changeSetp(2)"
      >
        Submit
      </el-button>
      <span
       class="cancel" 
       @click="changeSetp(0)"
      >
        Cancel
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container{
  font-size: 0.9rem;
  .plaint-text{
    color: #aaadb1;
  }
  .selection-area{
    margin: 1rem 0;
    padding: 0 1rem;
    border: 1px solid #dddfe3;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    .assess-item{
      margin-right: 1rem;
      .item-name{
        color: #696c71;
      }
      .item-controler{
        display: flex;
        align-items: center;
        margin: 10px 0;
        .color-point{
          width: 1rem;
          height: 1rem;
          // background:gray;
          border-radius: 50%;
        }
        .select{
          :deep(.el-select__wrapper) {
            box-shadow:none;
            width: 8rem;
          }
        }
        .result{
          display: inline-block;
        }
      }
    }
  }
  .control-area{
    .cancel{
      cursor: pointer;
      margin-left: 1rem;
    }
  }
}

@media (max-width: 1250px) {
  .container{
      .selection-area{
        display: block;
      }
    }
}
</style>
